<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery基本选择器</title>
    <!--
    引入jQuery的js文件
    -->
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript">
        //页面加载完成后事件
        $(function () {
            //获取值
            //text():获取标签的文本
            var spanText=$("span").text();
            console.log(spanText);
            //val():获取输入框中的内容
            var username=$("#username").val();
            console.log(username);
            //html():获取标签的文本，包含html标签
            var divHtml=$("#div1").html();
            console.log(divHtml);
            //设置值
            //text("xxxx"):设置文本
            $("span").text("这是修改后的span元素值");
            //val("xxx"):设置输入框中的值
            $("#username").val("修改后的用户名rose")
            //html("xxxx"):设置文本，如果文本存在html标签，将标签解析为可用的标签
            $("#div1").html("<span>超链接改成了span元素</span>");
            //属性操作
            //attr("color","red");设置属性
            $("#username").attr("style","color:red");
            //attr("color");获取属性
            console.log($("#username").attr("color"));
        });
    </script>
</head>
<body>
        <span>这是span标签</span><br/>
        用户名:<input type="text" id="username" value="jack">
        <div id="div1"><a href="https://www.baidu.com">百度一下</a> </div>
</body>
</html>